<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
    <van-empty image="search"/>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" type="info">查看详情</van-button>
      </template>
    </van-card>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" type="info">查看详情</van-button>
      </template>
    </van-card>
    <van-card
      tag="推荐"
      price="2499.00"
      desc="IOS7 6+64GB 平板电脑"
      title="iPad"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag plain type="primary">数码</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" type="info">查看详情</van-button>
      </template>
    </van-card>
    <van-tabbar v-model="active" :border="false" :safe-area-inset-bottom="true">
      <van-tabbar-item name="home" icon="wap-home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item name="search" icon="search" to="/search">搜索</van-tabbar-item>
      <van-tabbar-item name="shoppingCart" icon="shopping-cart-o" to="/shoppingCart">购物车</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o" to="/settings">设置</van-tabbar-item>
    </van-tabbar>
    <!--为了让最后一个商品不被遮挡-->
    <div>
      <p style="color: white">1</p>
      <p style="color: white">1</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      value: '',
      active: 'search',
    };
  },
  methods: {},
}
</script>

<style scoped>

</style>
